<template>
  <div class="mod-customers">
    <div class="d-customers over">
      <div class="arrow-box">
        <div id="prev" class="arrow prev disable" @click="prevPart()" ref="prev"></div>
        <div id="next" class="arrow next" @click="nextPart()" ref="next"></div>
      </div>
      <div class="customers-box" ref="box">
        <div class="customers-content" ref="content">
          <div
            class="statis-item"
            v-on:click="clickStatis(0,$event)"
            style="background: rgba(235,238,243,0.92)"
            id="totalMember"
          >
            <h4 class="statis-item__title">{{$t('dataAnalysis.cumulativeNumberOfMembers')}}</h4>
            <p class="statis-item__data">{{this.$parent.totalMember}}</p>
            <br />
            <span class="change-trend change-trend--decline">
              <span class="change-trend__title">{{this.$parent.compareDate}}</span>
              <span class="change-trend__data">
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.totalMemberRate === 0">-</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.totalMemberRate > 0">↑</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.totalMemberRate < 0">↓</i>
                <span
                  v-if="this.rateRatio.totalMemberRate !== 0"
                >{{Math.abs(this.rateRatio.totalMemberRate) + '%'}}</span>
              </span>
            </span>
          </div>
          <div class="statis-item" v-on:click="clickStatis(1,$event)" id="newMember">
            <h4 class="statis-item__title">{{$t('dataAnalysis.numberOfNewMembers')}}</h4>
            <p class="statis-item__data">{{this.$parent.newMember}}</p>
            <br />
            <span class="change-trend change-trend--decline">
              <span class="change-trend__title">{{this.$parent.compareDate}}</span>
              <span class="change-trend__data">
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.newMemberRate === 0">-</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.newMemberRate > 0">↑</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.newMemberRate < 0">↓</i>
                <span
                  v-if="this.rateRatio.newMemberRate !== 0"
                >{{Math.abs(this.rateRatio.newMemberRate) + '%'}}</span>
              </span>
            </span>
          </div>
          <div class="statis-item" v-on:click="clickStatis(2,$event)" id="payMember">
            <h4 class="statis-item__title">{{$t('dataAnalysis.numberOfPaidMembers')}}</h4>
            <p class="statis-item__data">{{this.$parent.payMember}}</p>
            <br />
            <span class="change-trend change-trend--decline">
              <span class="change-trend__title">{{this.$parent.compareDate}}</span>
              <span class="change-trend__data">
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.payMemberRate === 0">-</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.payMemberRate > 0">↑</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.payMemberRate < 0">↓</i>
                <span
                  v-if="this.rateRatio.payMemberRate !== 0"
                >{{Math.abs(this.rateRatio.payMemberRate) + '%'}}</span>
              </span>
            </span>
          </div>
          <div class="statis-item" v-on:click="clickStatis(3,$event)" id="couponMember">
            <h4 class="statis-item__title">{{$t('dataAnalysis.numberOfCouponMembers')}}</h4>
            <p class="statis-item__data">{{this.$parent.couponMember}}</p>
            <br />
            <span class="change-trend change-trend--decline">
              <span class="change-trend__title">{{this.$parent.compareDate}}</span>
              <span class="change-trend__data">
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.couponMemberRate === 0">-</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.couponMemberRate > 0">↑</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.couponMemberRate < 0">↓</i>
                <span
                  v-if="this.rateRatio.couponMemberRate !== 0"
                >{{Math.abs(this.rateRatio.couponMemberRate)+ '%'}}</span>
              </span>
            </span>
          </div>
          <div class="statis-item" v-on:click="clickStatis(4,$event)" id="memberPayAmount">
            <h4 class="statis-item__title">{{$t('dataAnalysis.memberPaidAmount')}}</h4>
            <p class="statis-item__data">{{this.$parent.memberPayAmount}}</p>
            <br />
            <span class="change-trend change-trend--decline">
              <span class="change-trend__title">{{this.$parent.compareDate}}</span>
              <span class="change-trend__data">
                <i
                  class="zenticon zenticon-arrow-down"
                  v-if="this.rateRatio.memberPayAmountRate === 0"
                >-</i>
                <i
                  class="zenticon zenticon-arrow-down"
                  v-if="this.rateRatio.memberPayAmountRate > 0"
                >↑</i>
                <i
                  class="zenticon zenticon-arrow-down"
                  v-if="this.rateRatio.memberPayAmountRate < 0"
                >↓</i>
                <span
                  v-if="this.rateRatio.memberPayAmountRate !== 0"
                >{{Math.abs(this.rateRatio.memberPayAmountRate) + '%'}}</span>
              </span>
            </span>
          </div>
          <div class="statis-item" v-on:click="clickStatis(5,$event)" id="memberPayOrder">
            <h4 class="statis-item__title">{{$t('dataAnalysis.numberOfMemberPaidOrders')}}</h4>
            <p class="statis-item__data">{{this.$parent.memberPayOrder}}</p>
            <br />
            <span class="change-trend change-trend--decline">
              <span class="change-trend__title">{{this.$parent.compareDate}}</span>
              <span class="change-trend__data">
                <i
                  class="zenticon zenticon-arrow-down"
                  v-if="this.rateRatio.memberPayOrderRate === 0"
                >-</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.memberPayOrderRate > 0">↑</i>
                <i class="zenticon zenticon-arrow-down" v-if="this.rateRatio.memberPayOrderRate < 0">↓</i>
                <span
                  v-if="this.rateRatio.memberPayOrderRate !== 0"
                >{{Math.abs(this.rateRatio.memberPayOrderRate) + '%'}}</span>
              </span>
            </span>
          </div>
          <div class="statis-item" v-on:click="clickStatis(6,$event)" id="memberSingleAmount">
            <h4 class="statis-item__title">{{$t('dataAnalysis.memberCustomerUnitPrice')}}</h4>
            <p class="statis-item__data">{{this.$parent.memberSingleAmount}}</p>
            <br />
            <span class="change-trend change-trend--decline">
              <span class="change-trend__title">{{this.$parent.compareDate}}</span>
              <span class="change-trend__data">
                <i
                  class="zenticon zenticon-arrow-down"
                  v-if="this.rateRatio.memberSingleAmountRate === 0"
                >-</i>
                <i
                  class="zenticon zenticon-arrow-down"
                  v-if="this.rateRatio.memberSingleAmountRate > 0"
                >↑</i>
                <i
                  class="zenticon zenticon-arrow-down"
                  v-if="this.rateRatio.memberSingleAmountRate < 0"
                >↓</i>
                <span
                  v-if="this.rateRatio.memberSingleAmountRate !== 0"
                >{{Math.abs(this.rateRatio.memberSingleAmountRate) + '%'}}</span>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      indexSwitch: 0,
      rateRatio: {
        couponMemberRate: 0,
        memberPayAmountRate: 0.00,
        memberPayOrderRate: 0.00,
        memberSingleAmountRate: 0,
        newMemberRate: 0,
        payMemberRate: 0,
        totalMemberRate: 0
      },
      isMove: false, // 当内容宽度大于盒子宽度，isMove为true，反之为false
      screenWidth: '' // 屏幕宽度
    }
  },
  mounted () {
    var ele = document.getElementsByClassName('statis-item__title')
    for (var j = 0, len = ele.length; j < len; j++) {
      this.$parent.oneEchartAllName.push(ele[j].innerText)
    }
    // 监听游览器窗口变化
    const that = this
    window.addEventListener('resize', function () {
      that.screenWidth = document.body.offsetWidth
    })
  },
  watch: {
    // 内容里的数据改变，重新判断内容和盒子大小比较
    rateRatio () {
      this.judgeSize()
    },
    // 窗口变化，重新判断内容和盒子大小比较
    screenWidth () {
      this.judgeSize()
    }
  },
  methods: {
    clickStatis: function (index, e) {
      this.indexSwitch = index
      this.$parent.oneEchartCurrentName = e.currentTarget.getElementsByClassName('statis-item__title')[0].innerText
      this.$parent.updateOneEchart(this.$parent.dataForm, index)
      this.backSwitch(e)
    },
    backSwitch (e) {
      var ele = document.getElementsByClassName('statis-item')
      for (let i = 0; i < ele.length; i++) {
        ele[i].style.background = null
      }
      e.currentTarget.style.background = 'rgba(235,238,243,0.92)'
    },
    // 左箭头
    prevPart () {
      if (this.isMove === true) {
        if (this.$refs.content.style.left !== '0px') {
          this.$refs.content.style.left = '0'
          this.$refs.content.style.right = ''
          this.$refs.prev.style.cursor = 'not-allowed'
          this.$refs.next.style.cursor = 'pointer'
        }
      }
    },
    // 右箭头
    nextPart () {
      if (this.isMove === true) {
        if (this.$refs.content.style.right !== '0px') {
          this.$refs.content.style.right = '0'
          this.$refs.content.style.left = ''
          this.$refs.prev.style.cursor = 'pointer'
          this.$refs.next.style.cursor = 'not-allowed'
        }
      }
    },
    // 判断内容和盒子的大小
    judgeSize () {
      this.$nextTick(() => {
        if (this.$refs.content.clientWidth > this.$refs.box.clientWidth) {
          this.isMove = true
          if (this.$refs.content.style.right === '0px') {
            this.$refs.prev.style.cursor = 'pointer'
          } else {
            this.$refs.next.style.cursor = 'pointer'
          }
        } else {
          this.isMove = false
          this.$refs.prev.style.cursor = 'not-allowed'
          this.$refs.next.style.cursor = 'not-allowed'
          this.$refs.content.style.left = ''
          this.$refs.content.style.right = ''
        }
      })
    }
  }
}
</script>

<style lang="scss">
.mod-customers {
  .over {
    padding: 0 32px;
  }

  .d-customers {
    position: relative;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;

    // 两个左右切换的按钮
    .arrow-box {
      position: absolute;
      top: 40%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
      left: 0;
      width: 100%;
    }
    .over .arrow-box {
      display: block;
    }
    .arrow-box .arrow {
      width: 22px;
      height: 22px;
      background: #eee;
      position: absolute;
      z-index: 2;
      border-radius: 50%;
      cursor: pointer;
    }
    .arrow-box .arrow.disable {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .arrow-box .arrow.prev {
      left: 0;
      transform: rotate(180deg);
    }
    .arrow-box .arrow.next {
      right: 0;
    }
    .arrow-box .arrow::before,
    .arrow-box .arrow::after {
      position: absolute;
      top: 6px;
      display: block;
      width: 0;
      height: 0;
      content: " ";
      font-size: 0;
      border: 5px solid transparent;
    }
    .arrow-box .arrow::before {
      left: 10px;
      border-left: 5px solid #999;
    }
    .arrow-box .arrow::after {
      left: 8px;
      border-left: 5px solid #eee;
    }

    // 展示框
    .customers-box {
      position: relative;
      height: 124px;
      margin: 20px 0;
      overflow: hidden;

      .customers-content{
        position: absolute;
      }
      .statis-item {
        box-sizing: border-box;
        min-width: 187px;
        height: 124px;
        padding: 16px;
        border: 1px solid #dcdee0;
        border-radius: 4px;
        cursor: pointer;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 8px;
      }
      .statis-item:last-child{
        margin-right: 0;
      }
      .statis-item__title {
        font-size: 14px;
        line-height: 20px;
        display: inline-block;
        margin-bottom: 8px;
      }
      .statis-item:hover {
        border: #87c3f5 solid 1px;
        cursor: pointer;
      }
    }
  }
}
</style>
